<template>
	<view class="list-item-container">
		<scroll-view scroll-y="true" class="list-scroll" @scrolltolower="handletolower">
			<view class="list-item-content">
				<ListCard :item="item" v-for="item in ArticleList" :key="item._id" @goArticleDetail="goArticleDetail"
					@saveSearchHistor="saveSearchHistor"></ListCard>
			</view>
			<uni-load-more v-if="showloading && (ArticleList.length === 0 || ArticleList.length > 6 )" iconType="auto"
				:status="loadData.loading ? loadData.loading : 'loading'"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "ListItem",
		props: {
			ArticleList: {
				type: Array,
				default () {
					return []
				}
			},
			loadData: {
				type: Object,
				default () {
					return {
						loading: "loading"
					}

				}
			},
			showloading: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			//滚动到最底部
			handletolower() {

				this.$emit("ontolower")
			},
			//点击进入文章详情页
			async goArticleDetail(item) {
				const {
					_id,
					title,
					thumbs_up_count,
					create_time,
					browse_count,
					author,
					comments_count
				} = item
				const params = {
					_id,
					title,
					thumbs_up_count,
					create_time,
					browse_count,
					author,
					comments_count
				}
				// uni.navigateTo({
				// 	url: `/pages/articleDetail/articleDetail?params=${JSON.stringify(params)}`
				// })
				this.$Router.push({
					path: "/pages/articleDetail/articleDetail",
					query: params
				})
			},
			//对搜索进行记录
			saveSearchHistor() {
				this.$emit("saveSearchHistor")
			}
		}

	}
</script>

<style scoped lang="scss">
	.list-item-container {
		height: 100%;

		.list-scroll {
			overflow: hidden;
			height: 100%;
			box-sizing: border-box;
		}
	}
</style>
